<template>
  <div class="test">
    <div class="search-filter">
      <search
        class="search-block"
        placeholder="输入套餐名称搜索"
        @on-result-click="handleClickResult"
        @on-change="handleChangeSearch"
        v-model="searchValue"
        @on-cancel="handleCancelSearch"
        @on-submit="handleSubmitSearch"
        @on-clear="handleClearSearch"
        ref="search"
      ></search>
      <div class="filter-block">
          <div style="width: 18%; float: left" @click="handleSort(1)">
            <span class="filter-span">销量<i :class="handleSalesSort ? 'tri-up-icon' : 'tri-down-icon'"></i></span>
          </div>
          <div style="width: 18%; float: left" @click="handleSort(2)">
            <span class="filter-span">人气<i :class="handlePopuSort ? 'tri-up-icon' : 'tri-down-icon'"></i></span>
          </div>
          <div style="width: 18%; float: left" @click="handleSort(3)">
            <span class="filter-span">档次<i :class="handleLevelSort ? 'tri-up-icon' : 'tri-down-icon'"></i></span>
          </div>
          <div style="width: 18%; float: left" @click="handleSort(4)">
            <span class="filter-span">价格<i :class="handlePriceSort ? 'tri-up-icon' : 'tri-down-icon'"></i></span>
          </div>
          <div style="width: 26%; float: left">
            <x-input
              type="number"
              placeholder="该价格以下"
              class="filter-input"
              @on-focus="handlePriceFilter = true"
              @on-blur="handlePriceFilter = false"
              :style="handlePriceFilter ? {width: '60%', border: '2px solid #f9c270'} : ''"
            ></x-input>
            <icon v-if="handlePriceFilter" type="search" class="search-btn"></icon>
          </div>
      </div>
    </div>
    <div class="product-list" ref="productWrapper">
      <div>
        <div class="top-tip">
          <span class="refresh-hook">{{ product.topTip }}</span>
        </div>
          1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>
        <div class="bottom-tip">
          <span class="loading-hook">{{ product.bottomTip }}</span>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  import BScroll from 'better-scroll'
  import { Group, Search, XInput, Icon, Flexbox, FlexboxItem } from 'vux'
  import ProductCp from './public/productCp'

  export default {
    components: {
      Group,
      Search,
      Icon,
      XInput,
      Flexbox,
      FlexboxItem,
      ProductCp
    },
    data () {
      return {
        searchValue: '',
        handleSalesSort: false,
        handlePopuSort: false,
        handleLevelSort: false,
        handlePriceSort: false,
        handlePriceFilter: false,
        productFmt: [],
        productList: [],
        totalProductSize: 0,
        productPage: 0,
        product: {
          topTip: '下拉刷新',
          bottomTip: '加载更多',
          isLoading: false,
          refreshSuccess: false
        }
      }
    },
    created () {
      this.$nextTick(() => {
        this._initProductScroll()
      })
    },
    methods: {
      _initProductScroll () {
        var productScroll = new BScroll(this.$refs.productWrapper, {
          click: true,
          probeType: 1
        })
        this.productScroll = productScroll
        productScroll.on('scroll', function (position) {
        })
        productScroll.on('touchend', function (position) {
        })
      },
      handleClearSearch () {

      },
      handleCancelSearch () {

      },
      handleChangeSearch () {

      },
      handleSubmitSearch () {

      },
      handleClickResult () {

      },
      handleSort (type) {
        switch (type) {
          case 1:
            this.handleSalesSort = !this.handleSalesSort
            if (this.handleSalesSort) {

            } else {

            }
            break
          case 2:
            this.handlePopuSort = !this.handlePopuSort
            if (this.handlePopuSort) {

            } else {

            }
            break
          case 3:
            this.handleLevelSort = !this.handleLevelSort
            if (this.handleLevelSort) {

            } else {

            }
            break
          case 4:
            this.handlePriceSort = !this.handlePriceSort
            if (this.handlePriceSort) {

            } else {

            }
            break
        }
      }
    }
  }
</script>

<style lang="less">
.test {
  .search-filter {
    z-index: 2;
    background: #f8f8fa;
    height: 110px;
    .weui-search-bar:after {
      width: 0;
    }
    .weui-search-bar:before {
      width: 0;
    }
    .search-block {
      z-index: 2;
      margin: 10px auto 0 auto;
    }
    .weui-cell {
      padding: 2px 2px;
    }
    .filter-block {
      z-index: 2;
      width: 94%;
      margin: 15px auto 10px auto;
      height: 30px;
      color: @bg-font-color;
      font-size: 13px;
      .filter-span {
        display: inline-block;
      }
      .filter-input {
        display: inline-block;
        width: 100%;
        border: 2px solid #fff;
        margin-top: -4px;
        border-radius: 5px;
        background: #fff;
      }
      .search-btn {
        display: inline-block;
        float: right;
        height: 20px;
        width: 22px;
        border-radius: 5px;
        padding-top: 5px;
        padding-left: 3px;
        margin-top: -3px;
        color: #fff;
        background: @theme-color;
        box-shadow: 0 2px 15px @theme-shadow-color;
      }
    }
    .tri-up-icon {
      float: right;
      background: url('../assets/tri-up.png') no-repeat;
      background-size: 20px;
      width: 20px;
      height: 20px;
      margin-top: -2px;
    }
    .tri-down-icon {
      float: right;
      margin: 2px 7px 0 0;
      background: url('../assets/tri-down.png') no-repeat;
      background-size: 22px;
      width: 22px;
      height: 22px;
      margin-top: 0px;
    }
  }
  .product-list {
    position: absolute;
    top: 110px;
    bottom: 0;
    left: 0;
    width: 100%;
    .show-block {
      position: relative;
    }
    .left {
      margin-left: 4vw;
    }
    .right {
      margin-right: 4vw;
    }
    .top-tip {
      position: absolute;
      top: -110px;
      z-index: 1;
      width: 100%;
      height: 40px;
      line-height: 40px;
      text-align: center;
      color: #555;
    }
    .bottom-tip {
      margin-top: 20px;
      width: 100%;
      height: 35px;
      line-height: 35px;
      text-align: center;
      color: #777;
      background: #f2f2f2;
    }
  }
}
</style>
